<template>
  <div id="search-form-container" class="container">
    <div class="search-wrapper" style="height: 300px">
      <div class="keyword-wrapper" ref="keyword_wrapper">
        <input
            :placeholder="
            'Expert' === type ? '输入并搜索专家...' : '输入并搜索设计团队...'
          "
            type="text"
            v-model="form.keyWord"
            class="keyword-input"
            @input="inputSug"
            @keyup.enter="search();hideSug()"
        />
        <div class="keyword-sug">
          <ul>
            <li class="sug-overflow" v-for="keywordSug in keywordSugList" :key="keywordSug"
                @click="selectSug(keywordSug)">{{ keywordSug }}
            </li>
          </ul>
        </div>
        <a href="javascript:" class="clear-button" @click="clearKeyword" v-show="form.keyWord">
          <svg
              height="24"
              p-id="7995"
              t="1622457465252"
              version="1.1"
              viewBox="0 0 1024 1024"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
              class="icon"
          >
            <path
                d="M512 32C251.4285715625 32 32 251.4285715625 32 512s219.4285715625 480 480 480 480-219.4285715625 480-480-219.4285715625-480-480-480z m205.7142853125 617.142856875c20.5714284375 20.5714284375 20.5714284375 48 0 61.714286249999994-20.5714284375 20.5714284375-48 20.5714284375-61.714285312499996 0l-137.142856875-137.1428578125L374.857143125 717.7142853125c-20.5714284375 20.5714284375-48 20.5714284375-68.5714284375 0s-20.5714284375-54.857143125 0-68.5714284375l144-144-137.1428578125-137.142856875c-20.5714284375-13.714285312500001-20.5714284375-41.142856875 0-61.714285312499996 20.5714284375-20.5714284375 48-20.5714284375 61.714286249999994 0l137.142856875 137.142856875 144-144c20.5714284375-20.5714284375 48-20.5714284375 68.5714284375 0 20.5714284375 20.5714284375 20.5714284375 48 0 68.5714284375L580.5714284375 512l137.142856875 137.142856875z"
                fill="#cdcdcd"
                p-id="7996"
            ></path>
          </svg>
        </a>
        <a class="search-button" @click="search();hideSug()"><i class="el-icon-search"></i></a>
      </div>
      <!-- Expert -->
      <div class="filter-wrapper clearfix" v-if="'Expert' === type" style="height: 170px">
        <div class="filter-item clearfix">
          <span class="filter-key">所在地区：</span>
          <span class="filter-value" :class="{ selected: form.region.includes('全部') }"
                @click="selectFilter(form.region, '全部')">全部</span>
          <span class="filter-value" :class="{ selected: form.region.includes(region) }"
                v-for="region in filter.expert.regionList" :key="region"
                @click="selectFilter(form.region, region)">{{ region }}</span>
        </div>
        <div class="filter-item clearfix">
          <span class="filter-key">专业领域：</span>
          <span class="filter-value" :class="{ selected: form.domain.includes('全部') }"
                @click="selectFilter(form.domain, '全部')">全部</span>
          <span class="filter-value" :class="{ selected: form.domain.includes(domain) }"
                v-for="domain in filter.expert.domainList" :key="domain"
                @click="selectFilter(form.domain, domain)">{{ domain }}</span>
        </div>
        <div class="filter-item clearfix">
          <span class="filter-key">头衔荣誉：</span>
          <span class="filter-value" :class="{ selected: form.honor.includes('全部') }"
                @click="selectFilter(form.honor, '全部')">全部</span>
          <span class="filter-value" :class="{ selected: form.honor.includes(honor) }"
                v-for="honor in filter.expert.honorList" :key="honor"
                @click="selectFilter(form.honor, honor)">{{ honor }}</span>

        </div>
        <div class="filter-item clearfix">
          <span class="filter-key">参与情况：</span>
          <span class="filter-value" :class="{ selected: form.meeting.includes('全部') }"
                @click="selectFilter(form.meeting, '全部')">全部</span>
          <span class="filter-value" :class="{ selected: form.meeting.includes(meeting) }"
                v-for="meeting in filter.expert.meetingList" :key="meeting"
                @click="selectFilter(form.meeting, meeting)">{{ meeting }}</span>
        </div>
      </div>
      <!-- Team -->
      <div class="filter-wrapper clearfix" v-if="'Team' === type" style="height: 170px">
        <div class="filter-item clearfix">
          <span class="filter-key">所在地区：</span>
          <span class="filter-value" :class="{ selected: form.region.includes('全部') }"
                @click="selectFilter(form.region, '全部')">全部</span>
          <span class="filter-value" :class="{ selected: form.region.includes(region) }"
                v-for="region in filter.team.regionList" :key="region"
                @click="selectFilter(form.region, region)">{{ region }}</span>
        </div>
        <div class="filter-item clearfix">
          <span class="filter-key">专业领域：</span>
          <span class="filter-value" :class="{ selected: form.domain.includes('全部') }"
                @click="selectFilter(form.domain, '全部')">全部</span>
          <span class="filter-value" :class="{ selected: form.domain.includes(domain) }"
                v-for="domain in filter.team.domainList" :key="domain"
                @click="selectFilter(form.domain, domain)">{{ domain }}</span>
        </div>
        <div class="filter-item clearfix">
          <span class="filter-key">荣誉奖项：</span>
          <span class="filter-value" :class="{ selected: form.honor.includes('全部') }"
                @click="selectFilter(form.honor, '全部')">全部</span>
          <span class="filter-value" :class="{ selected: form.honor.includes(honor) }"
                v-for="honor in filter.team.honorList" :key="honor"
                @click="selectFilter(form.honor, honor)">{{ honor }}</span>
        </div>
        <div class="filter-item clearfix">
          <span class="filter-key">参与情况：</span>
          <span class="filter-value" :class="{ selected: form.meeting.includes('全部') }"
                @click="selectFilter(form.meeting, '全部')">全部</span>
          <span class="filter-value" :class="{ selected: form.meeting.includes(meeting) }"
                v-for="meeting in filter.team.meetingList" :key="meeting"
                @click="selectFilter(form.meeting, meeting)">{{ meeting }}</span>
        </div>
      </div>
    </div>
    <div id="toggle-search-wrapper" v-show="showToggleButton" @click="toggleSearchWrapper">
      <img alt="" src="@/assets/svg/filter.svg" class="filter-svg"/>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchForm",
  props: ["type"],
  data() {
    return {
      showToggleButton: !0,
      searchDivClientHeight: "0px",
      filterDivClientHeight: "0px",
      keywordSugList: [],
      filter: {
        expert: {
          regionList: [
            "东莞",
            "广州",
            "深圳",
            "北京",
            "上海",
            "国内其他城市",
            "境外",
          ],
          domainList: ["其它"],
          honorList: [
            "两院院士",
            "全国工程勘察设计大师",
            "梁思成建筑奖",
            "普利兹克建筑奖",
            "WA中国建筑奖",
          ],
          meetingList: ["指挥部项目"],
        },
        team: {
          regionList: [
            "东莞",
            "广州",
            "深圳",
            "北京",
            "上海",
            "国内其他城市",
            "境外",
          ],
          domainList: ["其它"],
          honorList: [
            "国际竞赛第一名",
            "全国优秀城乡规划设计一等奖",
            "WA中国建筑奖",
          ],
          meetingList: ["指挥部项目"],
        },
      },
      form: {
        searchType: this.type.toLowerCase(),
        pageIndex: 0,
        pageSize: 30,
        keyWord: "",
        region: ["全部"],
        domain: ["全部"],
        honor: ["全部"],
        meeting: ["全部"],
      },
    };
  },
  created() {
    this.getDomainList();
  },
  computed: {
    parentDiv() {
      return document.getElementById("search-form-container");
    },
    searchDiv() {
      return document.getElementsByClassName("search-wrapper").item(0);
    },
    filterDiv() {
      return document.getElementsByClassName("filter-wrapper").item(0);
    },
    keywordSugDiv() {
      return document.getElementsByClassName("keyword-sug").item(0);
    },
  },
  mounted() {
    const t = this;
    this.searchDivClientHeight = this.searchDiv.clientHeight + "px"
    this.searchDiv.style.height = this.searchDivClientHeight
    this.filterDivClientHeight = this.filterDiv.clientHeight + "px"
    this.filterDiv.style.height = this.filterDivClientHeight
    window.addEventListener("scroll", this.scroll, !0)
    window.addEventListener("click", function (e) {
          t.$refs.keyword_wrapper &&
          (t.$refs.keyword_wrapper.contains(e.target) || t.hideSug());
        }, true
    );
  },
  destroyed() {
    var t = this;
    window.removeEventListener("scroll", this.scroll, !0),
        window.removeEventListener(
            "click",
            function (e) {
              t.$refs.keyword_wrapper &&
              (t.$refs.keyword_wrapper.contains(e.target) || t.hideSug());
            },
            !0
        );
  },
  methods: {
    getDomainList() {
      if ("Expert" === this.type) {
        this.$http.get("api/expertDomain/list").then(res => {
          if (200 === res.data.code) {
            this.filter.expert.domainList = [];
            for (let domain of res.data.data) {
              this.filter.expert.domainList.push(domain.domainName)
            }
          }
        });
      } else if ("Team" === this.type) {
        this.$http.get("api/teamDomain/list").then(res => {
          if (200 === res.data.code) {
            this.filter.team.domainList = [];
            for (let domain of res.data.data) {
              this.filter.team.domainList.push(domain.domainName)
            }
          }
        });
      }
    },
    //点按条件后的处理
    selectFilter(filterList, item) {
      if ("全部" === item){
        filterList.length = 0
        filterList.push("全部")
      } else if ("全部" !== item){
        if (filterList.includes("全部")){
          filterList.splice(filterList.indexOf("全部"), 1)
        }
        filterList.includes(item) ? filterList.splice(filterList.indexOf(item), 1) : filterList.push(item)
        if (!filterList.length){
          filterList.push("全部")
        }
      }
      this.search()
    },
    scroll() {
      document.documentElement.scrollTop || document.body.scrollTop;
      this.parentDiv.clientHeight, (this.showToggleButton = !0);
    },
    toggleSearchWrapper() {
      "0px" === this.searchDiv.style.height
          ? (this.searchDiv.style.height = this.searchDivClientHeight)
          : (this.searchDiv.style.height = "0px");
    },
    selectSug(t) {
      (this.form.keyWord = t), this.hideSug(), this.search();
    },
    getSug() {
      const t = this;
      "Expert" === this.type
          ? this.$http
              .get("api/preSearch?type=expert&keyWord=" + this.form.keyWord)
              .then(function (e) {
                200 === e.data.code && (t.keywordSugList = e.data.data);
              })
          : "Team" === this.type &&
          this.$http
              .get("api/preSearch?type=team&keyWord=" + this.form.keyWord)
              .then(function (e) {
                200 === e.data.code && (t.keywordSugList = e.data.data);
              });
    },
    inputSug() {
      const t = this;
      clearTimeout(this.timeout),
          (this.timeout = setTimeout(function () {
            t.getSug(), t.showSug();
          }, 200));
    },
    showSug() {
      "" === this.form.keyword &&
      0 === this.form.keywordSugList.length &&
      this.getSug(),
          (this.searchDiv.style.overflow = "inherit"),
          (this.keywordSugDiv.style.display = "block");
    },
    hideSug() {
      (this.searchDiv.style.overflow = "hidden"),
          (this.keywordSugDiv.style.display = "none");
    },
    search() {
      (this.form.pageIndex = 0), this.$store.commit("search", this.form);
    },
    clearKeyword() {
      (this.form.keyWord = ""), this.search();
    },
  },
};
</script>

<style scoped>
#search-form-container {
  width: 1230px;
  margin: 0 auto;
  padding: 10px 0;
  z-index: 100;
  background-color: #f4f4f4;
  position: sticky;
  top: 70px;
}

.search-wrapper {
  min-width: 1230px;
  width: 1230px;
  overflow: hidden;
  margin: 0 auto;
  background-color: grey;
  transition: all 0.3s ease 0s;
  box-shadow: 0 1rem 1rem 0 hsla(0, 0%, 62.7%, 0.05);
}

.search-wrapper .keyword-wrapper {
  width: 95%;
  margin: 30px 0;
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.search-wrapper .keyword-wrapper .keyword-input {
  width: 100%;
  height: 70px;
  border: 4px solid #f1f3f2;
  transition: all 0.3s ease 0s;
  outline: 0;
  color: #000;
  font-size: 1rem;
  padding: 0.875rem 1rem 0.875rem 2.625rem;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.search-wrapper .keyword-wrapper .keyword-input:focus,
.search-wrapper .keyword-wrapper:hover .keyword-input {
  border: 4px solid #4c93cf;
}

.search-wrapper .keyword-wrapper .search-button {
  width: 62px;
  height: 62px;
  line-height: 62px;
  display: inline-block;
  position: absolute;
  margin-top: 4px;
  right: 4px;
  background-color: grey;
  color: #fff;
  transition: all 0.3s ease 0s;
  text-align: center;
  cursor: pointer;
  font-size: 30px;
}

.search-wrapper .keyword-wrapper .search-button:hover {
  background-color: #4c93cf;
}

.search-wrapper .keyword-wrapper .keyword-sug {
  width: 916px;
  position: absolute;
  top: 70px;
  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
  background: #fff;
  display: none;
  overflow: hidden;
}

.search-wrapper .keyword-wrapper .keyword-sug ul li {
  list-style: none;
  padding: 12px 2.625rem;
  color: #666;
  line-height: 28px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.search-wrapper .keyword-wrapper .keyword-sug ul li:hover {
  background-color: #e6e6e6;
}

.search-wrapper .keyword-wrapper .clear-button {
  position: absolute;
  z-index: 100;
  top: 50%;
  cursor: pointer;
  transform: translate(-100%, -50%);
  right: 60px;
  margin-top: 3px;
}

.search-wrapper .filter-wrapper {
  background-color: #fff;
  padding-top: 10px;
  transition: all 0.3s ease 0s;
  overflow: hidden;
}

.search-wrapper .filter-wrapper .filter-item {
  padding: 4px;
  margin: 0 20px 10px 20px;
}

.search-wrapper .filter-wrapper .filter-item .filter-key {
  font-weight: 700;
  width: 74px;
  height: 100%;
  float: left;
  font-size: 14px;
  color: #000;
  line-height: 22px;
}

.search-wrapper .filter-wrapper .filter-item .filter-value {
  padding: 6px 10px;
  margin: 0 6px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  color: #929190;
}

.search-wrapper .filter-wrapper .filter-item .filter-value:hover,
.search-wrapper .filter-wrapper .filter-item .selected {
  background-color: #4c93cf;
  color: #fff;
}

#toggle-search-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background-color: rgba(79, 79, 79, 0.14);
  position: absolute;
  top: 20px;
  right: 1355px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#toggle-search-wrapper:hover {
  background-color: rgba(79, 79, 79, 0.34);
}

.filter-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>